@mixin btnScale($width: 160rem, $height: 48rem, $fontSize: 24rem, $fontColor: #fff)
    display: block
    width: $width/$rem
    height: $height/$rem
    border-radius: ($height/2)/$rem
    line-height: $height/$rem
    text-align: center
    font-size:$fontSize/$rem
    color: $fontColor
    background: $btnBgColor
@mixin box-sizing($box-sizing-type: border-box)
    -webkit-box-sizing: $box-sizing-type
    -moz-box-sizing: $box-sizing-type
    box-sizing: $box-sizing-type

@mixin prefix($prefix,$val)
    #{$prefix}: $val
    -webkit-#{$prefix}: $val
    -moz-#{$prefix}: $val

@mixin border-radius($radius-type: 5px)
    -webkit-border-radius: $radius-type
    -moz-border-radius: $radius-type
    border-radius: $radius-type

@mixin box-shadow($shadow-type: 0px 0px 5px #ccc)
    -webkit-box-shadow: $shadow-type
    -moz-box-shadow: $shadow-type
    box-shadow: $shadow-type

@mixin clearfix()
    *zoom: 1
    &:after
        content: ""
        display: block
        clear: both
        height: 0
@mixin bordertop($b: 1px,$c :#e1e1e1)
    position: relative
    z-index: 1
    &:after
        content: ''
        position: absolute
        z-index: 1
        top: 0
        left: 0
        right: 0
        width: 100%
        border-bottom: $b solid $c
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-aspect-ratio: 1.5)
        &::after
            @include prefix("transform",scaleY(0.7))

    @media (-webkit-min-device-pixel-ratio: 2),(min-device-aspect-ratio: 2)
        &::after
            @include prefix("transform",scaleY(0.5))

    @media (-webkit-min-device-pixel-ratio: 2.5),(min-device-aspect-ratio: 2.5)
        &::after
            @include prefix("transform",scaleY(0.4))

    @media (-webkit-min-device-pixel-ratio: 3),(min-device-aspect-ratio: 3)
        &::after
            @include prefix("transform",scaleY(0.333))

    @media (-webkit-min-device-pixel-ratio: 3.5),(min-device-aspect-ratio: 3.5)
        &::after
            @include prefix("transform",scaleY(0.2857))
@mixin borderbottom($b: 1px,$c :#e1e1e1)
    position: relative
    z-index: 1
    &:after
        content: ''
        position: absolute
        z-index: 1
        bottom: 0
        left: 0
        right: 0
        width: 100%
        border-bottom: $b solid $c

    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-aspect-ratio: 1.5)
        &::after
            @include prefix("transform",scaleY(0.7))

    @media (-webkit-min-device-pixel-ratio: 2),(min-device-aspect-ratio: 2)
        &::after
            @include prefix("transform",scaleY(0.5))

    @media (-webkit-min-device-pixel-ratio: 2.5),(min-device-aspect-ratio: 2.5)
        &::after
            @include prefix("transform",scaleY(0.4))

    @media (-webkit-min-device-pixel-ratio: 3),(min-device-aspect-ratio: 3)
        &::after
            @include prefix("transform",scaleY(0.333))

    @media (-webkit-min-device-pixel-ratio: 3.5),(min-device-aspect-ratio: 3.5)
        &::after
            @include prefix("transform",scaleY(0.2857))

@mixin bordermbt($b,$c :#e1e1e1,$w: 100%)
    position: relative
    z-index: 1
    &:before,
    &:after
        content: ''
        position: absolute
        z-index: 1
        top: 50%
        left: 0
        right: 0
        width: $w
    &:after
        border-bottom: $b solid $c
    &:before
        border-top: $b solid $c
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-aspect-ratio: 1.5)
        &::after,&::before
            @include prefix("transform",scaleY(0.7) translateY(-50%))

    @media (-webkit-min-device-pixel-ratio: 2),(min-device-aspect-ratio: 2)
        &::after,&::before
            @include prefix("transform",scaleY(0.5) translateY(-50%))

    @media (-webkit-min-device-pixel-ratio: 2.5),(min-device-aspect-ratio: 2.5)
        &::after,&::before
            @include prefix("transform",scaleY(0.4) translateY(-50%))

    @media (-webkit-min-device-pixel-ratio: 3),(min-device-aspect-ratio: 3)
        &::after,&::before
            @include prefix("transform",scaleY(0.333) translateY(-50%))

    @media (-webkit-min-device-pixel-ratio: 3.5),(min-device-aspect-ratio: 3.5)
        &::after,&::before
            @include prefix("transform",scaleY(0.2857) translateY(-50%))
@mixin bordercenter($b: 1px,$c :#e1e1e1)
    position: relative
    z-index: 1
    &:after
        content: ''
        position: absolute
        z-index: 1
        top: 0
        bottom: 0
        left: 50%
        height: 100%
        border-left: $b solid $c
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-aspect-ratio: 1.5)
        &::after
            @include prefix("transform",scaleX(0.7) translateX(-50%))
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-aspect-ratio: 2)
        &::after
            @include prefix("transform",scaleX(0.5) translateX(-50%))

    @media (-webkit-min-device-pixel-ratio: 2.5),(min-device-aspect-ratio: 2.5)
        &::after
            @include prefix("transform",scaleX(0.4)  translateX(-50%))

    @media (-webkit-min-device-pixel-ratio: 3),(min-device-aspect-ratio: 3)
        &::after
            @include prefix("transform",scaleX(0.333) translateX(-50%))

    @media (-webkit-min-device-pixel-ratio: 3.5),(min-device-aspect-ratio: 3.5)
        &::after
            @include prefix("transform",scaleX(0.2857) translateX(-50%))
@mixin borderVer($c :#e1e1e1)
    position: relative
    z-index: 1
    &:after
        content: ''
        position: absolute
        z-index: 1
        top: 50%
        height: 100%
        width: 0
        border-left: 1px solid $c
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-aspect-ratio: 1.5)
        &::after
            @include prefix("transform",scaleX(0.7) translateY(-50%))
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-aspect-ratio: 2)
        &::after
            @include prefix("transform",scaleX(0.5) translateY(-50%))

    @media (-webkit-min-device-pixel-ratio: 2.5),(min-device-aspect-ratio: 2.5)
        &::after
            @include prefix("transform",scaleX(0.4)  translateY(-50%))

    @media (-webkit-min-device-pixel-ratio: 3),(min-device-aspect-ratio: 3)
        &::after
            @include prefix("transform",scaleX(0.333) translateY(-50%))

    @media (-webkit-min-device-pixel-ratio: 3.5),(min-device-aspect-ratio: 3.5)
        &::after
            @include prefix("transform",scaleX(0.2857) translateY(-50%))

@mixin borderAll($c :#e1e1e1,$br: 0)
    position: relative
    &:after
        content: ''
        position: absolute
        left: -1px
        top: -1px
        width: 200%
        height: 200%
        border: 1px solid $c
        @include border-radius($br)
        @include prefix('transform-origin',top left)
        @include prefix("transform",scale(0.5,0.5))
